
<div class="col-jy-{num}">
		<div class="ibox float-e-margins">
        	<div class="ibox-title">
                <h5>{{check_show_lang('{title}')}}</h5>
            </div>
            <div class="ibox-content">
                <div class="echarts" id="echarts-chart-{ecid}" style="height: 310px;display: none;"></div>
				<div class="spiner-example" id="echarts-loading-{ecid}">
						<div class="sk-spinner sk-spinner-three-bounce">
							<div class="sk-bounce1"></div>
							<div class="sk-bounce2"></div>
							<div class="sk-bounce3"></div>
						</div>
                </div>
            </div>
        </div>
</div>
<script type="text/javascript">
setTimeout(function(){
var res = {datas};
	   if(res){
		   $("#echarts-loading-{ecid}").hide()
		   $("#echarts-chart-{ecid}").show();
			pie_chart_{ecid}(res);
	   }
} ,500);
function pie_chart_{ecid}(res){
	require(['echarts'],function (echarts) {
	var myChart = echarts.init(document.getElementById("echarts-chart-{ecid}"));
	var legend=[];
	$.each(res.datas,function(k,v){
		legend.push(v.name);
	});
		var option = {
				title: {
					text: scope.check_show_lang('{title}'),
					subtext: res.time,
					x: "center"
				},
				tooltip: {
					trigger: "item",
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient: "vertical",
					x: "left",
					data: legend
				},
				calculable: !0,
				series: [{
					name: scope.check_show_lang('{title}'),
					type: "pie",
					radius: "55%",
					center: ["50%", "60%"],
					data: res.datas
				}]
			};
		myChart.setOption(option);
		});
}
</script>